@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;
@use 'src/scss/gio-layout' as gio-layout;

$typography: map.get(gio.$mat-theme, typography);

.home-overview {
  padding: 24px 0 16px 0;
  display: flex;
  flex-flow: column;
  gap: 14px;

  &__time-selector {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  &__row {
    display: flex;
    gap: 14px;
  }

  &__card {
    width: 100%;
    flex: 1 1 100%;
    min-height: 250px;

    &.flex {
      display: flex;
      flex-direction: column;
    }

    &__list {
      display: flex;
      flex-direction: column;

      flex: 1 1 auto;

      &__row {
        gap: 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-bottom: 1px mat.get-color-from-palette(gio.$mat-dove-palette, 'darker10') solid;
        flex: 1 1 100%;

        &:last-child {
          border-bottom: none;
        }

        &__label {
          @include mat.typography-level($typography, 'caption');
        }

        &__value {
          @include mat.typography-level($typography, 'headline-6');
        }
      }
    }
  }
}

.home-api-events {
  padding: 16px 0 16px 0;
}

.loader {
  display: flex;
  align-items: center;
  justify-content: center;

  gio-loader {
    width: 32px;
  }
}
